<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">收藏</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>
		<!-- <view class="header">
			<view :class="active == index ? 'active' : ''" v-for="(item,index) in tabList" :key="index"
				@tap="tabChange(index)">{{item}}</view>
		</view> -->
		<view class="show-list">
			<scroll-view scroll-y="true" class="scrollView">
				<view v-if="goodsList.length>0" class="scrollViewBox">
					<view class="show-list-item" v-for="(item,index) in goodsList" :key="index" @tap="goGoodsDetail(item)">
						<view class="item-info">
							<view class="imgBox">
								<image :src="item.fileUrl" v-if="isImage(item.fileUrl)" class="file-img"
									mode="widthFix">
								</image>
								<video v-else class="file-img" :src="item.fileUrl" muted :autoplay="true"
									:controls="false" loop></video>
							</view>
							<view class="names">
								<text>{{item.name}}</text>
								<image v-if="setImgShow(item) == 1" src="@/static/home/fileType1.png" mode="widthFix"></image>
								<image v-if="setImgShow(item) == 2" src="@/static/home/fileType2.png" mode="widthFix"></image>
								<image v-if="setImgShow(item) == 3" src="@/static/home/fileType3.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="noData">
						<image class="noDataImg" src="../../static/noData.png" mode=""></image>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<mix-loading ref="min_loading"></mix-loading>
		<u-modal :show="isShowModal" title="是否删除当前商品" :showCancelButton="true" @confirm="confirmFn" @cancel="cancelFn"></u-modal>
	</view>
</template>

<script>
	import {
		getCollectionList
	} from '../../api/user.js'
	export default {
		data() {
			return {
				goodsList: [],
				// tabList: ['收藏', '浏览'],
				// active: 0,
				listQuery: {
					page: 1,
					pageSize:10,
					pages:1,
					status:"1",//4关注1收藏
				},
				isShowModal:false
			}
		},
		onShow() {
			this.getNftList();
		},
		methods: {
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
			setImgShow(cur){///判断文件类型
				if(cur.metafile && cur.metafile.FileType){
					if(cur.metafile.FileType == ".glb"){
						return 3;
					}else if(cur.metafile.FileType == ".mp4"){
						return 2;
					}else{
						return 1;
					}
				}
				return 1;
			},
			// tabChange(index) {
			// 	this.active = index
			// },
			getNftList() {
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getCollectionList(this.listQuery).then(res => {
					if (res.data.success) {
						this.listQuery.pages = res.data.obj.pages;
						
						let newList = res.data.obj.list.map((item, index) => {
							item["fileUrl"] =  (this.pathImg + item.fileUrl);
							return item;
						});
						if (this.listQuery.page == 1) {
							this.goodsList = [...newList];
						} else {
							this.goodsList = [...this.goodsList,...newList];
						}
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if (!url) {
					return
				}
				let filePath = url.toLocaleLowerCase();
				if (filePath.indexOf(".mp4") != -1) {
					return false;
				} else {
					return true;
				}
			},
			goGoodsDetail(cur){
				// 1发售2抢购3转售4用户
				if(cur.type == 1){
					uni.navigateTo({
						url:`/pages/detail/goodsInfo?id=${cur.infoId}`
					})
				}else if(cur.type == 2){
					uni.navigateTo({
						url:`/pages/detail/index?id=${cur.infoId}&path=sale`
					})
				}else{
					uni.navigateTo({
						url:`/pages/detail/goodsDetail?id=${cur.infoId}&path=resale`
					})
				}
			},
			deleteFn(item){
				this.isShowModal = true;
			},
			cancelFn(){
				this.isShowModal = false;
			},
			confirmFn(){
				this.isShowModal = false;
			}
		},
		onReachBottom() {
			if(this.listQuery.pages > this.listQuery.page){
				this.listQuery.page++;
				this.getNftList();
			}else{
				// this.isEnd = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	page{width: 100%;height: 100%;}
	.con-box {
		position: relative;
		min-height: 100vh;
		width: 100%;
		height: 100%;
		padding: 170upx 0upx 0;
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		
		.header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 76upx 130upx 52upx;
			color: #D6D6D6;
			position: relative;

			.active {
				color: #D54216;
				padding-bottom: 8upx;
				border-bottom: 4upx solid #D54216;
				padding-top: 8upx;
			}
		}

		.show-list {
			padding: 0 30upx;
			width: 100%;
			height: 100%;
			padding-bottom: 20upx;
			.noData{
				position: absolute;
				width: 220upx;
				height: 180upx;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-90%);
				.noDataImg{
					width: 220upx;
					height: 180upx;
				}
			}
			.scrollView{
				width: 100%;
				height: 100%;
				.scrollViewBox{
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					align-content: flex-start;
					flex-wrap: wrap;
					.show-list-item {
						width: 50%;
						margin-bottom: 30upx;
						.item-info {
							font-weight: 400;
							color: #333;
							background-color: #fff;
							border-radius: 20upx;
							padding-bottom: 30upx;
							.imgBox{
								width: 100%;
								height: 288upx;
								overflow: hidden;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 20upx;
								.file-img {
									width: 100%;
									max-height: 288upx;
								}
							}
							.names{
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0 20upx;
								padding-top: 16upx;
								image{
									width: 26upx;
								}
								>text{
									display: inline-block;
									flex: 1%;
									padding-right: 16upx;
									font-size: 24upx;
									color: #333;
								}
							}
						}
					}
					.show-list-item:nth-child(odd){
						padding-right: 15upx;
					}
					.show-list-item:nth-child(even){
						padding-left: 15upx;
					}
				}
			}
		}

	}
</style>
